<script setup>
	import $http from '@/utils/http'
	import { ref, onMounted } from 'vue'
	import { onReachBottom, onPullDownRefresh } from '@dcloudio/uni-app'
	import { moveElementsToNewArray, getClientHeight } from '@/utils/pkg'
	
	import watchIcon from '@/static/icon/home/watch.png'
	
	const fileList = ref([])
	const showFileList = ref([])
	const cacheFileList = ref([])
	const videoPage = ref(1)
	const videoLimit = ref(20)
	const platform = ref(0)
	const menuList = ref([
		{ text: '关注', key: false },
		{ text: '推荐', key: true },
		{ text: '发现', key: false },
		{ text: '热门', key: false },
	])

	// 获取视频
	const getFiles = async () => {
		const res = await $http.request({
			url: `/get-video-file/${videoPage.value}/${videoLimit.value}`,
			method: 'GET',
		})
		if(res.code !== 200) {
			uni.showToast({
				title: res.msg,
				duration: 2000,
				icon: 'error',
			});
			return
		}
		fileList.value = res.data
		showFileList.value = moveElementsToNewArray(fileList.value, 15)
	}
	
	// 顶部菜单
	const clickMenu = (itme, index) => {
		console.log(itme, index)
		menuList.value.filter(v => v.key = false)
		menuList.value[index].key = true
		uni.showLoading();
		setTimeout(() => {
			uni.hideLoading();
		}, 1000)
	}
	
	// 点击用户头像
	const clickUser = (itme, index) => {
		console.log(itme, index)
	}
	
	// 跳转播放页面
	const filePlay = (itme, i) => {
		uni.navigateTo({
			url: `/pages/show-video/show-video?file=${itme.filename}&name=${itme.name}`
		});
	}
	
	// 滑动到底部
	onReachBottom(()=>{
		let arr = []
		if(fileList.value.length > 15) {
			arr =	moveElementsToNewArray(fileList.value, 15)
		} else {
			arr =	moveElementsToNewArray(fileList.value, fileList.value.length)
		}
		showFileList.value.push(...arr)
	})

	// 下拉触发
	onPullDownRefresh(() => {
		uni.reLaunch({
		    url: '/pages/index/index'
		})
		uni.stopPullDownRefresh()
	})

	onMounted(() => {
		getFiles()
		platform.value = getClientHeight()
	})
</script>

<template>
	<view class="page-home" :style="`padding-top:${platform}rpx;`">
		<view class="menu-top-box" :style="`padding-top:${platform}rpx;`">
			<view class="menu-box">
				<text
					:class="`menu-list ${ itme.key ? 'menu-list-bottom' :'' }`"
					v-for="(itme, index) in menuList"
					:key="itme.id"
					@tap="clickMenu(itme, index)">
					{{itme.text}}
				</text>
			</view>
		</view>
		<view class="show-file-box">
			<view
				class="show-file-list"
				v-for="(itme, index) in showFileList"
				:key="index"
				@click="filePlay(itme, index)">
				<image class="show-video" mode="aspectFill" :src="itme.poster"></image>
				<view class="show-data">
					<view class="show-user" @click.stop="clickUser(itme, index)">
						<image class="show-avatar" mode="aspectFill" :src="itme.avatar"></image>
						<view class="show-user-name">{{itme.nickname}}</view>
						<view class="show-video-plays">
							<image class="watch-icon" mode="aspectFill" :src="watchIcon"></image>
							<text class="watch-text">10万</text>
						</view>
					</view>
					<view class="show-video-name">{{ itme.name }}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<style scoped lang="scss">
@import "@/common/common.scss";

.page-home {
	width: 100%;
	
	.menu-top-box {
		width: 100%;
		height: 70rpx;
		border-bottom: 1px solid #252932;
		background-color: $all-bg-color;
		
		top: 0;
		z-index: 100;
		position: fixed;
		
		.menu-box {
			width: 100%;
			height: 70rpx;
			
			display: flex;
			align-items: center;
			justify-content: space-around;
			
			.menu-list {
				color: #ffffff;
				font-size: 28rpx;
			}
			.menu-list-bottom {
				color: #7a9aff !important;
				text-decoration-line: underline;
				text-decoration-color: #7a9aff;
				text-decoration-style: solid;
			}
		}
	}
	
	.show-file-box {
		margin-top: 80rpx;

		display: grid;
		grid-gap: 5rpx;
		align-items: start;
		grid-auto-rows: 480rpx;
		justify-content: center;
		grid-template-columns: repeat(auto-fill, calc(50% - 8rpx));
		
		.show-file-list {
			width: 100%;
			height: 480rpx;
			padding: 10rpx;
			border-radius: 10rpx;
			box-sizing: border-box;
			background-color: $all-box-bg-color;
			
			.show-video {
				width: 100%;
				height: 350rpx;
				border-radius: 10rpx;
			}
			
			.show-data {
				width: 100%;
				color: #ffffff;
				
				display: flex;
				flex-direction: column;
				justify-content: flex-start;
				
				.show-user {
					width: 100%;
					height: 60rpx;

					display: flex;
					align-items: center;
					justify-content: flex-start;
					
					.show-avatar {
						width: 60rpx;
						height: 60rpx;
						border-radius: 50%;
					}
					.show-user-name {
						flex: 1;
						height: 60rpx;
						color: #dddddd;
						font-size: 30rpx;
						line-height: 60rpx;
						margin-left: 10rpx;

						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
					}
					
					.show-video-plays {
						width: 80rpx;
						height: 60rpx;
						overflow: hidden;
						
						display: flex;
						align-items: center;
						justify-content: center;
						flex-direction: column;
						
						
						.watch-icon {
							width: 30rpx;
							height: 25rpx;
						}
						
						.watch-text {
							color: #CDCDCD;
							font-size: 20rpx;
						}
					}
				}
				.show-video-name {
					width: 100%;
					height: 40rpx;
					color: #94969A;
					font-size: 28rpx;
					
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
				}
			}
		}
	}
}
</style>